import React, { Component } from 'react';
import {
	StyleSheet,
	View,
	WebView,
	DeviceEventEmitter
} from "react-native";
import { style } from '../../theme/style';
import { GLOBAL } from '../../config/global';
import { PageStatusIndex } from '../../component/page-status/PageStatusIndex';
import request from './request';
import { Common } from '../../component/common/Common';

let item = [];
export class ReportFilterPage extends Component {
	static navigationOptions = ({ navigation, navigationOptions }) => {
		return {
			headerTitle: '筛选',
			headerLeft: <Common type="headLeft" onPress={() => { navigation.goBack() }} color='#fff' />,
			headerTintColor: style.color.white,
			headerStyle: {
				elevation: 0,
				backgroundColor: style.color.themeColor,
			},
			headerTitleStyle: {
				textAlign: 'center',
			}
		}
	}

	constructor(props) {
		super(props);
		this.state = {
			webViewData: '',
			webViewUrl: '',
			_isLoad: false
		}
		this.filters;
		const { params } = this.props.navigation.state;
		this.params = params;

	}

	componentWillMount () {
		this._setUrl();
	}

	componentWillUnmount () {
		DeviceEventEmitter.emit('reportFilter');
		this.timer && clearTimeout(this.timer);
	}

	handleMessage (e) {
		if (e.nativeEvent.data) {
			this.filters = e.nativeEvent.data;
			this._getReportDetail(e.nativeEvent.data)
		}
	}

	async _getReportDetail (filter) {
		const detail = await request.getReportDetail(this.params.item.rptId);
		if (detail) {
			if (filter.indexOf('&') === -1) {
				filter = '';
			} else {
				const start = filter.indexOf('&')
				filter = filter.substr(start);
			}
			this.timer = setTimeout(this.props.navigation.navigate("ReportDetailPage", { item: detail, filterData: filter }), 2000);
		}
	}

	_loadError (e) {
		return (
			<View style={{ flex: 1 }}>
				<PageStatusIndex status='error' errorText={e} onErrorPress={() => this._setUrl()} />
			</View>
		)
	}

	async _setUrl () {
		let url;
		if (this.params.item.initUrl) {
			url = this.params.item.initUrl;
		} else {
			const detail = await this._getDetail();
			url = detail.initUrl;
		}

		this.setState({
			webViewUrl: url + this.params.filterData,
			filterData: this.params.filterData ? this.params.filterData : null
		});
	}

	async _getDetail () {
		const detail = await request.getReportDetail(this.params.item.rptId);
		if (detail) {
			return detail;
		}
	}

	render () {
		const webview = WebView;
		const { webViewUrl, filterData } = this.state;
		item[0] = webViewUrl;
		return (
			<View style={styles.container}>
				<WebView
					ref={'webview'}
					source={{
						uri: webViewUrl,
						headers: {
							'Accept': 'application/json',
							'Content-Type': 'application/json',
							"authToken": GLOBAL.TOKEN
						}
					}}
					style={{ width: '100%', height: '100%' }}
					onMessage={(e) => {
						this.handleMessage(e)
					}}
					renderError={(e) => this._loadError(e)}
					onError={(e) => this._loadError(e)}
					onLoadEnd={() => {
						this.refs.webview.postMessage(filterData);
					}}
					startInLoadingState={true}
				/>
			</View>
		)
	}
}

const styles = StyleSheet.create({
	container: {
		flex: 1
	}
})